<template lang="">
  <div ref="wordCloudRef" class="word-cloud-main" />
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
export default {
  data() {
    return {}
  },
  mounted() {
    var chart = echarts.init(this.$refs.wordCloudRef)
    chart.setOption({
      tooltip: {
        borderWidth: 0,
        backgroundColor: 'rgba(0,0,0,.5)',
        formatter: '{b}: {c}',
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          type: 'wordCloud',

          // The shape of the "cloud" to draw. Can be any polar equation represented as a
          // callback function, or a keyword present. Available presents are circle (default),
          // cardioid (apple or heart shape curve, the most known polar equation), diamond (
          // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

          shape: 'heart',

          // Keep aspect ratio of maskImage or 1:1 for shapes
          // This option is supported from echarts-wordcloud@2.1.0
          keepAspect: false,

          // A silhouette image which the white area will be excluded from drawing texts.
          // The shape option will continue to apply as the shape of the cloud to grow.

          // maskImage: maskImage,

          // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
          // Default to be put in the center and has 75% x 80% size.

          left: 'center',
          top: 'center',
          width: '100%',
          height: '100%',
          right: null,
          bottom: null,

          // Text size range which the value in data will be mapped to.
          // Default to have minimum 12px and maximum 60px size.

          sizeRange: [12, 60],

          // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

          rotationRange: [-90, 90],
          rotationStep: 45,

          // size of the grid in pixels for marking the availability of the canvas
          // the larger the grid size, the bigger the gap between words.

          gridSize: 8,

          // set to true to allow word being draw partly outside of the canvas.
          // Allow word bigger than the size of the canvas to be drawn
          drawOutOfBound: false,

          // If perform layout animation.
          // NOTE disable it will lead to UI blocking when there is lots of words.
          layoutAnimation: true,

          // Global text style
          textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color can be a callback function or a color string
            color: function() {
              // Random color
              return (
                'rgb(' +
                [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') +
                ')'
              )
            }
          },
          emphasis: {
            focus: 'self',

            textStyle: {
              textShadowBlur: 10,
              textShadowColor: '#333'
            }
          },

          // Data is an array. Each array item must have name and value property.
          data: [
            {
              name: ' 特斯拉Model S',
              value: 30
            },
            {
              name: '天生要强',
              value: 24
            },
            {
              name: ' 华为p20',
              value: 21
            },
            {
              name: '杜兰特',
              value: 19
            },
            {
              name: '三只松鼠',
              value: 18
            },
            {
              name: 'Mac Pro',
              value: 18
            },
            {
              name: 'Iphone12 Pro',
              value: 17
            },
            {
              name: '玛莎拉蒂',
              value: 12
            },
            {
              name: '小米手机',
              value: 12
            },
            {
              name: '保时捷',
              value: 11
            }
          ]
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped>
.word-cloud-main {
  width: 100%;
  height: 100%;
}
</style>
